<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.bounce-enter-active {
	  		animation: bounce-in .5s;
		}
		.bounce-leave-active {
	  		animation: bounce-in .5s reverse;
		}
		@keyframes bounce-in {
	  	0% {
	    	transform: scale(0);
	  	}
	  	50% {
	    	transform: scale(1.5);
	  	}
	  	100% {
	    	transform: scale(1);
	  	}
	}
	</style>
</head>
<body>
	<div id="demo">
  		<button @click="show = !show">Toggle show</button>
  		<br />
		<transition name="bounce">
    		<p v-if="show" style="display: inline-block;">Lorem ipsum dolor sit amet</p>
  		</transition>
	</div>

	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
	  		el: '#demo',
	  		data: {
	    		show: true
	  		}
		})
	</script>
</body>
</html>